<template>
    <div class="enterprise-admin-container">
        <div class="enterprise-admin-text">企业列表</div>
        <el-select
            :style="{'width': '450px', 'display': 'inline-block', 'marginTop': '20px'}"
            v-model="filter"
            @change="handleFilterChange"
        >
            <el-option label="全部" value="all"/>
            <el-option label="待认证" value="unpass"/>
        </el-select>
        <el-table
            :style="{'marginTop': '30px'}"
            v-loading="listLoading"
            :data="list"
            element-loading-text="Loading"
            border
            fit
            highlight-current-row
        >
            <el-table-column
                align="center"
                type="index"
                width="180"
                label="序号"
            >
            </el-table-column>
            <el-table-column align="center" label="企业名称">
                <template slot-scope="scope">
                    {{ scope.row.name }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="已认证">
                <template slot-scope="scope">
                    {{ scope.row.auth ? '是' : '否' }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="180">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        type="success"
                        @click="handleCheckDetail(scope.$index, scope.row)">
                        详情
                    </el-button>
                    <el-button
                        size="mini"
                        type="primary"
                        @click="handleAccess(scope.$index, scope.row)">
                        赋权
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    import {authEnterprise, getEnterpriseList, getEnterpriseToAuth} from "../../api/enterprise";

    export default {
        name: 'enterprise-admin',
        data() {
            return {
                filter: 'all',
                listLoading: true,
                list: null,
            }
        },
        methods: {
            handleFilterChange(val) {
                if(this.filter == 'all') {
                    getEnterpriseList().then(res => {
                        this.list = res.data
                        this.listLoading = false
                    })
                } else {
                    getEnterpriseToAuth().then(res => {
                        this.list = res.data
                        this.listLoading = false
                    })
                }
            },
            handleCheckDetail(index, row) {
                this.$router.push({path:'enterprise-detail', query: {id: row.id}})
            },
            handleAccess(index, row) {
                this.$router.push({path:"/access", query:{'id': row.id, 'role': 'enterprise'}})
            }
        },
        mounted() {
            getEnterpriseList().then(res => {
                this.list = res.data
                this.listLoading = false
            })
        }
    }
</script>

<style lang="scss" scoped>
    .enterprise-admin {
        &-container {
            margin: 30px;
            max-width: 90%;
        }
        &-text {
            font-size: 30px;
            line-height: 46px;
        }
    }
</style>
